<!-- 入院检查 特殊检查（术前） SpecialExamination -->
<template>
  <div class="page-center">
    <div class="medical-form">
      <el-form :model="formData" label-width="160px" class="info-form" label-position="right">
        <el-divider content-position="left">
          <h3>特殊检查（术前）</h3>
        </el-divider>

        <!-- 超声检查 -->
        <el-row v-if="formData.ultrasoundExams && formData.ultrasoundExams.length > 0" :gutter="12">
          <el-col :span="24">
            <el-card class="box-card" shadow="never">
              <div slot="header" class="clearfix">
                <span>超声检查</span>
              </div>
              <div
                v-for="(exam, index) in formData.ultrasoundExams"
                :key="exam.id"
                class="exam-section"
                :class="getExamSectionClass(index)"
              >
                <!-- 基本信息 -->
                <el-row :gutter="12">
                  <el-col :span="8">
                    <el-form-item label="病案号">
                      <div class="display-value info-value">{{ display(exam.medicalRecordNumber) }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="检查号">
                      <div class="display-value info-value">{{ display(exam.examinationNumber) }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="超声号">
                      <div class="display-value info-value">{{ display(exam.ultrasoundNumber) }}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="12">
                  <el-col :span="10">
                    <el-form-item label="检查时间">
                      <div class="display-value info-value">{{ display(exam.examinationTime) }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="机器型号">
                      <div class="display-value info-value">{{ display(exam.machineModel) }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="申请医师">
                      <div class="display-value info-value">{{ display(exam.requestingDoctor) }}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="12">
                  <el-col :span="16">
                    <el-form-item label="检查部位">
                      <div class="display-value info-value">{{ display(exam.examinationSite) }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="16">
                    <el-form-item label="临床诊断">
                      <div class="display-value info-value">{{ display(exam.clinicalDiagnosis) }}</div>
                    </el-form-item>
                  </el-col>
                </el-row>

                <!-- 超声检查结果 -->
                <el-row :gutter="12">
                  <el-col :span="24">
                    <el-form-item label="超声检查所见">
                      <div class="display-value info-value">{{ display(exam.ultrasoundFindings) }}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="12">
                  <el-col :span="24">
                    <el-form-item label="超声检查提示">
                      <div class="display-value info-value">{{ display(exam.ultrasoundImpression) }}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="12">
                  <el-col :span="8">
                    <el-form-item label="报告医师">
                      <div class="display-value info-value">{{ display(exam.reportingDoctor) }}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-divider v-if="index < formData.ultrasoundExams.length - 1" />
              </div>
            </el-card>
          </el-col>
        </el-row>

        <!-- 内分泌检查 -->
        <el-row v-if="formData.hormoneExams && formData.hormoneExams.length > 0" :gutter="12" style="margin-top: 16px;">
          <el-col :span="24">
            <el-card class="box-card" shadow="never">
              <div slot="header" class="clearfix">
                <span>内分泌检查</span>
              </div>
              <div
                v-for="(exam, index) in formData.hormoneExams"
                :key="exam.id"
                class="exam-section"
                :class="getExamSectionClass(index)"
              >
                <el-row :gutter="12">
                  <el-col :span="8">
                    <el-form-item label="FSH">
                      <div class="display-value info-value">{{ display(exam.fsh) }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="LH">
                      <div class="display-value info-value">{{ display(exam.lh) }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="总睾酮">
                      <div class="display-value info-value">{{ display(exam.totalTestosterone) }}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="12">
                  <el-col :span="8">
                    <el-form-item label="抑制素B">
                      <div class="display-value info-value">{{ display(exam.inhibinB) }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="AMH">
                      <div class="display-value info-value">{{ display(exam.amh) }}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-divider v-if="index < formData.hormoneExams.length - 1" />
              </div>
            </el-card>
          </el-col>
        </el-row>

        <!-- 精液分析 -->
        <el-row v-if="formData.semenExams && formData.semenExams.length > 0" :gutter="12" style="margin-top: 16px;">
          <el-col :span="24">
            <el-card class="box-card" shadow="never">
              <div slot="header" class="clearfix">
                <span>精液分析</span>
              </div>
              <div
                v-for="(exam, index) in formData.semenExams"
                :key="exam.id"
                class="exam-section"
                :class="getExamSectionClass(index)"
              >
                <!-- 基本信息 -->
                <el-row :gutter="12">
                  <el-col :span="8">
                    <el-form-item label="形态分析">
                      <div class="display-value info-value">{{ display(exam.analysis) }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="检验项目">
                      <div class="display-value info-value">{{ display(exam.testItem) }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="染色方法">
                      <div class="display-value info-value">{{ display(exam.stainingMethod) }}</div>
                    </el-form-item>
                  </el-col>
                </el-row>

                <!-- 时间信息 -->
                <el-row :gutter="12">
                  <el-col :span="10">
                    <el-form-item label="采集时间">
                      <div class="display-value info-value">{{ display(exam.collectionTime) }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="接收时间">
                      <div class="display-value info-value">{{ display(exam.receiveTime) }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="审核时间">
                      <div class="display-value info-value">{{ display(exam.reviewTime) }}</div>
                    </el-form-item>
                  </el-col>
                </el-row>

                <!-- 精液基本参数 -->
                <el-row :gutter="12">
                  <el-col :span="8">
                    <el-form-item label="精液量">
                      <div class="display-value info-value">{{ display(exam.semenVolume) }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="液化时间">
                      <div class="display-value info-value">{{ display(exam.liquefactionTime) }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="pH值">
                      <div class="display-value info-value">{{ display(exam.phValue) }}</div>
                    </el-form-item>
                  </el-col>
                </el-row>

                <!-- 精子数量和质量 -->
                <el-row :gutter="12">
                  <el-col :span="8">
                    <el-form-item label="精子浓度">
                      <div class="display-value info-value">{{ display(exam.spermConcentration) }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="前向运动(PR)">
                      <div class="display-value info-value">{{ display(exam.progressiveMotility) }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="计数精子数">
                      <div class="display-value info-value">{{ display(exam.spermCount) }}</div>
                    </el-form-item>
                  </el-col>
                </el-row>

                <!-- 精子形态 -->
                <el-row :gutter="12">
                  <el-col :span="8">
                    <el-form-item label="正常精子">
                      <div class="display-value info-value">{{ display(exam.normalSperm) }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="头部缺陷精子">
                      <div class="display-value info-value">{{ display(exam.headDefectSperm) }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="颈或中段缺陷精子">
                      <div class="display-value info-value">{{ display(exam.neckMidpieceDefectSperm) }}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="12">
                  <el-col :span="8">
                    <el-form-item label="尾部缺陷精子">
                      <div class="display-value info-value">{{ display(exam.tailDefectSperm) }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="胞浆小滴">
                      <div class="display-value info-value">{{ display(exam.cytoplasmicDroplet) }}</div>
                    </el-form-item>
                  </el-col>
                </el-row>

                <!-- 精子指数 -->
                <el-row :gutter="12">
                  <el-col :span="8">
                    <el-form-item label="精子畸形指数SDI">
                      <div class="display-value info-value">{{ display(exam.spermDeformityIndex) }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="多种异常指数MAI">
                      <div class="display-value info-value">{{ display(exam.multipleAnomalyIndex) }}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-divider v-if="index < formData.semenExams.length - 1" />
              </div>
            </el-card>
          </el-col>
        </el-row>

        <!-- 空状态提示 -->
        <el-row v-if="!hasData" :gutter="12">
          <el-col :span="24">
            <el-card class="box-card" shadow="never">
              <div class="empty-state">
                <i class="el-icon-info" style="font-size: 48px; color: #909399; margin-bottom: 16px;" />
                <p style="color: #909399; font-size: 14px;">暂无特殊检查数据</p>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { preSurgery } from '@/api/dataEntry/hospitalAdmissionCheckup'

export default {
  name: 'SpecialExamination',
  data() {
    return {
      formData: {
        ultrasoundExams: [],
        hormoneExams: [],
        semenExams: []
      },
      loading: false
    }
  },
  computed: {
    ...mapGetters('patient', ['robustPatientId', 'patientFallbackData']),

    // 检查是否有数据
    hasData() {
      return (
        (this.formData.ultrasoundExams && this.formData.ultrasoundExams.length > 0) ||
        (this.formData.hormoneExams && this.formData.hormoneExams.length > 0) ||
        (this.formData.semenExams && this.formData.semenExams.length > 0)
      )
    }
  },
  watch: {
    robustPatientId: {
      handler(newId) {
        if (newId) {
          this.loadData(newId)
        } else {
          this.resetForm()
        }
      },
      immediate: true
    }
  },
  async mounted() {
    if (!this.robustPatientId) {
      const restored = await this.restorePatientFromStorage()
      if (restored) {
        this.loadData(restored.id || restored.patientId)
      }
    }
  },
  methods: {
    ...mapActions('patient', ['restorePatientFromStorage']),

    async loadData(patientId) {
      if (this.loading) return

      this.loading = true
      try {
        const res = await preSurgery({ recordId: patientId })
        this.handleResponseData(res)
      } catch (error) {
        console.error('加载特殊检查数据失败:', error)
        this.applyFallbackData()
      } finally {
        this.loading = false
      }
    },

    handleResponseData(res) {
      const payload = res?.data?.data ?? res?.data ?? res ?? {}

      if (payload && Object.keys(payload).length > 0) {
        this.formData = {
          ...this.formData,
          ...payload
        }
      }
    },

    applyFallbackData() {
      // 特殊检查数据通常没有回退数据，保持空状态
    },

    resetForm() {
      this.formData = {
        ultrasoundExams: [],
        hormoneExams: [],
        semenExams: []
      }
    },

    display(val) {
      if (val === null || val === undefined || String(val).trim() === '') return '-'
      return val
    },

    getExamSectionClass(index) {
      return index % 2 === 0 ? 'exam-section-even' : 'exam-section-odd'
    }
  }
}
</script>

<!-- 引入共享样式 -->
<style src="@/styles/shared.css"></style>

<style scoped>
/* 卡片标题样式增强 */
.box-card >>> .el-card__header {
  background: linear-gradient(135deg, #7b92f9 0%, #8d6de4 100%);
  color: white;
  font-weight: bold;
  padding: 12px 20px;
}
</style>
